<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-11 10:27:21
 * @LastEditTime: 2020-07-10 19:25:57
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\common\wordTable.vue
 * @Description: word打印表格样式共用组件
 -->
<template>
    <div>
        <div class="wordTable" v-if="type==='arrays'">
            <el-row v-for="(item, idx) in label" :key="idx" class="wordTable_row">
                <el-col :span="24/item.length" class="wordTable_col" v-for="(item1, idx1) in item" :key="idx1">
                    <div class="wordTable_left" :style="leftStyle?leftStyle:''"><span>{{ item1.label }}</span> </div>
                    <div class="wordTable_right" style="word-break: break-all;">
                        <!-- 文件下载 -->
                        <span v-if="item1.hasOwnProperty('type')&&item1.type==='file'" class="wordTable_downSpan" @click="fileDownload(item1.attachPath)">{{ item1.value }}</span>
                        <span v-else>{{ item1.value }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="wordTable" v-else>
            <el-row v-for="(item, idx) in label" :key="idx" class="wordTable_row">
                <el-col :span="24/item.length" class="wordTable_col" v-for="(item1, idx1) in item" :key="idx1">
                    <div class="wordTable_left" :style="leftStyle?leftStyle:''"><span>{{ item1.label }}</span> </div>
                    <div class="wordTable_right" style="word-break: break-all;">
                        <!-- 文件下载 -->
                        <span v-if="item1.hasOwnProperty('type')&&item1.type==='file'" class="wordTable_downSpan" @click="fileDownload(data.attachPath)">
                            {{ data[item1.props] }}</span>
                        <span v-else>{{ data[item1.props] }}</span></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { downloadfile } from "common/src/api/upload";
export default {
    // 组件名称
    name: 'wordTable',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {
        data: {},
        label: {
            default: [],
            type: Array
        },
        leftStyle: {
            type: Object,
            default: {}
        },
        type: {
            type: String,
            default: ''
        }
    },
    // 组件状态值
    data() {
        return {
            // data: { name: '你好' }, // 数据类型
            // label: [
            //     [{ label: '学期学年：', props: 'name' }, { label: '年级：', props: 'name' }],
            //     [{ label: '学生专业：', props: 'name' }, { label: '学分：', props: 'name' }],
            //     [{ label: '人数：', props: 'name' }, { label: '课程代码：', props: 'name' }],
            //     [{ label: '课程名称：', props: 'name' }]
            // ]
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {
    },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
    },
    // 组件方法
    methods: {
        fileDownload(path) {
            downloadfile(path);
        }
    },
};
</script>
<style lang="scss" scoped>
$line: solid 1px #828282;
.wordTable {
    border-bottom: $line;
    border-right: $line;
    &_col {
        display: flex;
        align-items: stretch;
        div {
            min-height: 40px;
        }
    }
    &_row {
        display: flex;
        align-items: stretch;
    }
    &_left {
        width: 180px;
        background-color: #f0f0f0;
        border: $line;
        border-bottom: none;
        padding: 10px 5px;
        text-align: right;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        span {
            text-align: right;
            flex: auto;
            line-height: 20px;
        }
    }
    &_right {
        // align-self: center;
        padding: 10px 5px;
        border-top: $line;
        text-align: left;
        flex: auto;
        display: flex;
        align-items: center;
        span {
            text-align: left;
            line-height: 20px;
        }
        .wordTable_downSpan {
            color: #409eff;
            cursor: pointer;
        }
    }
}
</style>
